<template>
    <label class="radio" :class="{'is_clickColor':laber==value}">
        <span class="radio_input">
            <span class="radio_inner"></span>
            <input class="radio_main" type="radio"
            :value="laber" :name='name' 
            v-model="model">
        </span>
        <span class="radio_label">
            <slot>
                <template v-if="!$slots.default">{{laber}}</template>
            </slot>
        </span>
    </label>
</template>
<script>
export default {
    computed: {
        model:{
            get(){
                return this.value
            },
            set(value){
                this.$emit('input',value)
            }
        }
    },
    props:{
        laber:{
            type:[String,Number,Boolean],
            default:''
        },
        value:null,
        name:{
            type:String,
            default:''
        }
    }
}
</script>
<style lang="scss">
    .radio_input{
        width: 14px;
        height: 14px;
        border: 1px solid #DCDFE6;
        background-color: white;
        display:inline-block;
        border-radius: 100%;
        position:relative;
    }
    .radio_inner{
        width: 4px;
        height: 4px;
        background-color: white;
        display:inline-block;
        border-radius: 100%;
        position:absolute;
        top:4px;
        left: 4px;
    }
     .radio_label{
        color: #606266;
        margin-right: 10px;
    }
    .is_clickColor{
         .radio_input{
             background-color: #409EFF;
         }
        .radio_inner{
            background-color: white;
        }
        .radio_label{
            color: #409EFF;
        }
    }
    .radio_main{
        display: none;
    }
    
</style>